<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="fl-left avatar-box">
          <div class="user-card">
            <div class="user-headpic-update" :style="{ 'background-image': `url(${(userInfo.avatar && userInfo.avatar.slice(0, 4) !== 'http')?path+userInfo.avatar:userInfo.avatar})`,'background-repeat':'no-repeat','background-size':'cover' }" />
            <div class="user-personality">
              <p class="nickname">{{ userInfo.name }}</p>
              <p class="person-info">{{ userInfo.selfIntroduction }}</p>
            </div>
            <div class="user-information">
              <ul>
                <li>
                  <i class="el-icon-user" />{{ userInfo.name }}
                </li>
                <el-tooltip class="item" effect="light" :content="userInfo.career" placement="top">
                  <li>
                    <i class="el-icon-data-analysis" /> {{ userInfo.career }}
                  </li>
                </el-tooltip>
                <li>
                  <i class="el-icon-video-camera-solid" /> {{ userInfo.location }}
                </li>
                <el-tooltip class="item" effect="light" :content="filterDict( userInfo.plateForm, 'Platform')" placement="top">
                  <li>
                    <i class="el-icon-medal-1" /> {{ filterDict( userInfo.plateForm, "Platform") }}
                  </li>
                </el-tooltip>

              </ul>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="user-addcount">
          <el-tabs v-model="activeName">
            <el-tab-pane label="智能心理量表" name="one">
              <polar-chart :msg="mindScale" />
              <polar-charts :msgs="mindScale_30" />
            </el-tab-pane>
            <el-tab-pane label="智能心理量表问卷" name="two">
              <form-table />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { findMindScale } from '@/api/mind_scale'
import infoList from '@/mixins/infoList'
import polarChart from '@/view/mind_scale/component/polarChart.vue'
import PolarCharts from '@/view/mind_scale/component/polarCharts.vue'
import FormTable from '@/view/mind_scale/component/formtable.vue'

export default {
  name: 'Person',
  components: {
    polarChart,
    PolarCharts,
    FormTable
  },
  mixins: [infoList],
  data() {
    return {
      activeName: 'one',
      userInfo: {},
      mindScale: [],
      mindScale_30: [],
      path: process.env.VUE_APP_BASE_API
    }
  },
  async created() {
    await this.getDict('Platform')
    await this.getDict('sex')
    this.init_page()
  },
  methods: {
    async init_page() {
      const { data } = await findMindScale({ ID: this.$route.query.id })
      this.userInfo = data
      this.mindScale = data.mindScaleRes.scale_5d.split(',')
      this.mindScale_30 = data.mindScaleRes.scale_30d.split(',')
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-box {
  box-shadow: -2px 0 20px -16px;
  width: 80%;
  height: 100%;
  .user-card {
    min-height: calc(90vh - 200px);
    padding: 30px 20px;
    text-align: center;
    .el-avatar {
      border-radius: 50%;
    }
    .user-personality {
      padding: 24px 0;
      text-align: center;
      p {
        font-size: 16px;
      }
      .nickname {
        font-size: 26px;
      }
      .person-info{
        margin-top: 6px;
        font-size: 14px;
        color:#999
      }
    }
    .user-information {
      width: 100%;
      height: 100%;
      text-align: left;
      ul {
        display: inline-block;
        height: 100%;
        width: 100%;
        li {
          width: 100%;
          white-space:nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          i {
            margin-right: 8px;
          }
          padding: 20px 0;
          font-size: 16px;
          font-weight: 400;
          color: #606266;
        }
      }
    }
  }
}
.user-addcount {
  ul {
    li {
      .title {
        padding: 10px;
        font-size: 18px;
        color: #696969;
      }
      .desc {
        font-size: 16px;
        padding: 0 10px 20px 10px;
        color: #a9a9a9;
        a {
          color: rgb(64, 158, 255);
          float: right;
        }
      }
      border-bottom: 2px solid #f0f2f5;
    }
  }
}
.user-headpic-update{
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    border-radius: 20px;
     &:hover{
      color: #fff;
      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
      background-blend-mode: multiply,multiply;
      .update{
        color:#fff ;
      }
    }
    .update{
      height: 120px;
      width: 120px;
      text-align: center;
      color:transparent;
    }
  }
</style>
